.playContainer {
  @apply bg-black w-full;
  font-family: Alibaba PuHuiTi 2;
  margin-top: 5rem !important;
  padding: 1.875rem 0;
  height: 52.083333vw;
  max-height: calc(100vh - 5rem);

  .playBox {
    @apply w-full h-full flex;

    .playArea {
      @apply w-full h-full flex flex-col bg-bg;

      .play {
        @apply relative bg-black w-full flex-1;

        .notVip {
          @apply absolute z-3 left-0 top-0;
        }
      }

      .playMenu {
        @apply w-full flex items-center justify-between;
        height: 3.75rem;

        .menuLeft,
        .menuRight {
          @apply flex;
        }

        .btn {
          @apply rounded inline-flex h-10 items-center justify-center relative text-white text-sm cursor-pointer;
          font-family: Alibaba PuHuiTi 2;
          width: 7.5rem;
          background: rgba(255, 255, 255, 0.1);

          &:hover {
            @apply opacity-80;
          }

          &:not(:first-child) {
            @apply ml-5;
          }

          & > img {
            width: 1.125rem;
            height: 1.125rem;
            margin-right: 0.625rem;
          }

          &.btnShare {
            .corn {
              @apply absolute w-5 h-5;
              right: -1.125rem;
              top: -0.5rem;
              perspective: 50px;
              transform-style: preserve-3d;
              animation: scales 0.5s 8;
            }

            @keyframes scales {
              0% {
                transform: rotateY(0deg);
              }

              100% {
                transform: rotateY(180deg);
              }
            }
          }

          &.btnMore {
            @apply relative;

            &::before {
              @apply absolute w-full left-0 h-4 z-4;
              top: -1rem;
              content: '';
            }
          }

          .btnHover {
            @apply absolute z-100 hidden;
            bottom: 3.2rem;
          }

          &:hover {
            @apply opacity-100;

            .btnHover {
              @apply flex;
            }
          }
        }
      }
    }

    .sectionBox {
      @apply h-full bg-bg p-5 flex flex-col shrink-0;
      width: 20.625rem;

      .titleName {
        @apply font-semibold text-white leading-5 text-xl;
      }

      .liveTip {
        @apply font-medium mb-5 mt-6 text-lg;
        line-height: 1.125rem;
        color: #999999;
      }

      .jujiBox {
        @apply w-full flex-1 overflow-y-auto pr-5;

        &::-webkit-scrollbar {
          width: 0.25rem;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: rgba(255, 255, 255, 0.2);
        }

        .jujiItem {
          @apply flex bg-bg25 rounded items-center;
          height: 3.75rem;
          border: 1px solid rgba(255, 255, 255, 0.2);

          &:not(:last-child) {
            margin-bottom: 0.625rem;
          }

          &.jujiActive {
            &:hover {
              border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .liveRight {
              .liveName {
                @apply text-theme;
              }
            }
          }

          &:hover {
            border: 2px solid #ffffff;
          }

          .img {
            height: 3.125rem;
            width: 5.5rem;
            margin-right: 0.9375rem;
          }

          .liveRight {
            @apply flex-1 h-full flex items-center justify-between overflow-hidden;
            background-image: url('/images/live-right-bg.webp');
            background-size: 100% 100%;

            .liveName {
              @apply text-white-80 mr-1 flex-1;
            }

            .liveIcon {
              @apply shrink-0 h-5 w-5 mr-2;
            }

            .living {
              @apply shrink-0 mr-2;
            }
          }
        }
      }
    }
  }
}

.name {
  @apply text-white mt-6 mb-2;
  font-size: 1.875rem;
  line-height: 2.75rem;
}

.desc {
  @apply text-sm text-white-60;
  width: calc(100% - 1rem);
  line-height: 1.3125rem;
}

// 移动端
@media screen and (max-width: 767px) {
  .playContainer {
    margin-top: 5.875rem !important;
    padding: 0;

    .playBox {
      &.playBoxPhone {
        @apply fixed z-4;
        top: 94px;
        height: 52.083333vw;
      }
    }
  }

  .titlePhone {
    @apply m-0 my-4 px-4;
    font-size: 1.375rem !important;
  }

  .channelPhone {
    @apply flex flex-nowrap px-4 overflow-x-auto mt-4 pb-2;

    .channel {
      @apply shrink-0 mr-2 block rounded-sm;

      &.active {
        .img {
          border: 1px solid #fff;
        }

        & > span {
          @apply text-theme;
        }
      }

      .img {
        @apply h-auto bg-bg33 rounded-sm relative overflow-hidden;
        width: 29.066vw;
        height: 16.753vw;
        background-image: url('/images/live-right-bg.webp');
        background-size: 100% 100%;

        & > img {
          @apply h-full w-full object-contain;
        }
      }

      & > span {
        @apply block text-white text-xs text-center mt-1;
        width: 29.066vw;
      }
    }
  }

  .playMenuPhone {
    @apply w-full flex pl-4;

    .btn {
      @apply rounded inline-flex h-10 w-10 items-center justify-center relative;
      font-family: Alibaba PuHuiTi 2;
      background: rgba(255, 255, 255, 0.1);

      &.btnCollected {
        @apply text-theme;
      }

      &:not(:first-child) {
        @apply ml-5;
      }

      & > img {
        width: 1.125rem;
        height: 1.125rem;
      }

      &.btnShare {
        .corn {
          @apply absolute;
          width: 1rem;
          height: 1rem;
          right: -0.375rem;
          top: -0.375rem;
          perspective: 50px;
          transform-style: preserve-3d;
          animation: scales 0.5s 8;
        }

        @keyframes scales {
          0% {
            transform: rotateY(0deg);
          }

          100% {
            transform: rotateY(180deg);
          }
        }
      }
    }
  }

  .introduce {
    @apply text-white-80 text-lg pl-4 mt-7 mb-5;
    line-height: 1.125rem;
  }

  .desc {
    @apply w-full px-4;
  }
}

// 横屏代码
@media screen and (max-width: 767px) and (orientation: landscape) {
  .playContainer {
    height: calc(100vmin - 94px);
    .playBox {
      &.playBoxPhone {
        @apply relative z-4;
        top: 0px;
        height: calc(100vmin - 94px);
      }
    }
  }
}
